    .smart_login {
		width: 100%;
		height: 100%;
		background: linear-gradient(200deg, #074C8E, #918ef9);
		.smart_login_title {
			width: 90%;
			height: 200px;
			margin: 0 auto;
			line-height: 200px;
			color: #fff;
			letter-spacing: 2px;
			font-family: '楷体', Arial, sans-serif;
			font-size: 40px;
			font-weight: bold;
			text-align: center;
		}


		.smart_login_container {
			width: 100%;
			height: calc(100% - 200px);
			display: flex;
			justify-content: center;
			align-items: center;

			.smart_login_left {
				width: 500px;
				height: 300px;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				margin-top: -200px;

				.item {
					width: 430px;
					height: 90px;
					padding: 0 20px;
					border-radius: 100px 20px 20px 100px;
					background-color: #fff;
					position: absolute;
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					font-size: 20px;
					font-weight: bold;
				}

				.item {
					opacity: 0;
					animation: animate 10s linear infinite;
					animation-delay: calc(var(--i) * 2s);
				}
			}

			.smart_login_left:hover {
				.item {
					cursor: pointer;
					animation-play-state: paused;
				}
			}

			.smart_login_right {
				width: 400px;
				height: 350px;
				background-color: rgba(0, 0, 0, 0.4);
				box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.5);
				padding: 0 30px;
				border-radius: 5px;
				margin-left: 30px;
				margin-top: -200px;

				p {
					color: #fff;
					font-size: 24px;
					line-height: 86px;
					text-align: center;
					height: 80px;
					border-bottom: 1px solid #eee;
					
				}
				.login_from_user,
				.login_from_pass{
					display: flex;
					align-items: center;
					margin-top: 15px;
				}
				.item_span {
					font-family: PingFangSC-Regular;
					font-size: 16px;
					color: #fff;
					display: inline-block;
					margin-left: 10px;
					margin-top: -5px;
				}
				.submit_btn{
					height: 55px;
					line-height: 55px;
					font-size: 24px;
					border-radius: 6px;
					padding: 0 20px;
					margin-top: 20px;
					text-align: center;
					color: #fff;
					background: linear-gradient(-135deg, #856df1, #918ef9);
					cursor: pointer;
					letter-spacing: 2px;
					
				}
			}
		}
	}
	
	
	@keyframes animate {
			0% {
				opacity: 0;
				transform: translateY(100%) scale(0.5);
			}
	
			5%,
			20% {
				opacity: 0.4;
				transform: translateY(100%) scale(0.7);
			}
	
			25%,
			40% {
				opacity: 1;
				transform: translateY(0%) scale(1);
			}
	
			45%,
			60% {
				opacity: 0.4;
				transform: translateY(-100%) scale(0.7);
			}
	
			65%,
			100% {
				opacity: 0;
				transform: translateY(-100%) scale(0.5);
			}
		}